{extend name="public/base" /}

{block name="include_header"}{include file="public/header" title="Telegram_Ai_Bot | 用户界面-实例列表 AiBot" annotation="header钩子"}{/block}

           {block name="title"}<h2 class="pageheader-title">实例列表 AiBot</h2>{/block}

            {block name="box"}
            <div class="card">
                <h5 class="card-header"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">AiBot List</font></font>
                
                
                <a href="javascript:add_ai_bot()" class="btn btn-outline-info right" style=" float: right;"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">+ 添加实例</font></font></a>
                <input id="aibot_name" type="text" style=" float: right;width:260px;margin-right:30px;" class="form-control is-valid" placeholder="请输入实例名">
                </h5>
                <div class="card-body">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th scope="col"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">#</font></font></th>
                                <th scope="col"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">实例名</font></font></th>
                                <th scope="col"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">账号名</font></font></th>
                                <th scope="col"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">登录时间</font></font></th>
                                <th scope="col"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">操作</font></font></th>
                            </tr>
                        </thead>
                        <tbody>
                            {volist name="example" id="vo" empty="暂无数据"}
                            <tr>
                                <th scope="row"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">{$vo.id}</font></font></th>
                                <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">{$vo.name}</font></font></td>
                                <td><a href="//t.me/{$vo.username}" target="_blank"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;color:#00BFFF;">@{$vo.username}</font></font></a></td>
                                <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">{:date('Y-m-d H:i:s',$vo.time)}</font></font></td>
                                <td>
                                    <span class="badge badge-pill badge-primary" onclick="look_qun('{$vo.name}')" data-target="#centeredModalWarning" data-toggle="modal"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">查看群/联系人</font></font></span>
                                    
                                    <span class="badge badge-pill badge-primary" onclick="look_contact('{$vo.name}','{$vo.username}')">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 34 34" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-crosshair align-middle mr-2"><circle cx="12" cy="12" r="10"></circle><line x1="22" y1="12" x2="18" y2="12"></line><line x1="6" y1="12" x2="2" y2="12"></line><line x1="12" y1="6" x2="12" y2="2"></line><line x1="12" y1="22" x2="12" y2="18"></line></svg>
                                    <font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> 检测状态</font></font>
                                    </span>
                                    
                                    <span class="badge badge-pill badge-danger" onclick="outlogin('{$vo.name}','{$vo.username}')"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">登出</font></font></span> 
                                </td>
                            </tr>
                            {/volist}
                            {$example->render()}
                        </tbody>
                    </table>
                </div>
            </div>
            
            
            <div class="modal fade" id="centeredModalWarning" tabindex="-1" role="dialog" aria-hidden="true">
    			<div class="modal-dialog modal-dialog-centered" role="document">
    				<div class="modal-content">
    					<div class="modal-header">
    						<h5 class="modal-title">点击要查看的群</h5>
    						<button type="button" onclick="shut_centeredModalWarning()" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                            </button>
    					</div>
    					<div class="modal-body m-3">
    					    <a id="loading"></a>
    						<p class="mb-0" id="QunList"><a id="qun_list"></a></p>
    					</div>
    					<div class="modal-footer">
    						<button type="button" onclick="shut_centeredModalWarning()" class="btn btn-secondary" data-dismiss="modal">关闭</button>
    					</div>
    				</div>
    			</div>
    		</div>
            {/block}

{block name="include_footer"}{include file="public/footer"  annotation="footer钩子"}{/block}
{block name="js"}
    <script>
        function add_ai_bot(){
            var name = $('#aibot_name').val();
            if(!name){
                msg('温馨提醒','请输入实例名');
                return;
            }
            
            window.location.href="/add_ai_bot?name="+name;
        }
        
        function outlogin(name,username){
            //console.log('outlogin')
            if (confirm('确定要删除吗？')==true){ 
                $.get('/index/api/outlogin',{'name':name,'username':username},function(res){
                    if(res.code>0){
                        msg('false',res.msg)
                    }else{
                       msg('ture',res.msg)
                       setTimeout(function(){location.reload();},1000);
                    }
                },'json');
            }else{
                msg('温馨提示','您点了取消');
            }
           // console.log('1')
        }
        /**
         * name 实例名
         * username 群邀请链接后缀
        **/
        function look_contact(name,username){
            window.location.href='/look_contact/name/'+name+'/username/'+username;
        }
        
        function look_qun(name){
            //console.log(1);
            shut_centeredModalWarning();
            $('#loading').html('<font class="text-primary" style="vertical-align: inherit;"><font style="vertical-align: inherit;" id="perform_type"><span class="dashboard-spinner spinner-xs"></span>获取中...</font></font>');
            $.get('index/Api/qun_list',{name:name},function(res){
                console.log(res);
                //var count_res = count(res)
                for(var i = 0; i < res.length; i++){
                    $('#qun_list').append('<a href="/index/Index/qun_member/name/'+name+'/id/'+res[i].migrated_to.channel_id+'" target="_blank">'+res[i].title+'</a>&nbsp;&nbsp;&nbsp;');
                }
                
                
                if(count(res) == 0){
                    $('#loading').html('您还未创建群组！');
                }else{
                    $('#loading').html('');
                }
                // while(i<count_res){
                //     $('#qun_list').append('<a>'+res.title+'</a>');
                //     i++
                // }
            },'json');
            
            function count(o){
                var t = typeof o;
                if(t == 'string'){
                        return o.length;
                }else if(t == 'object'){
                        var n = 0;
                        for(var i in o){
                                n++;
                        }
                        return n;
                }
                return false;
             }
        }
        
        function shut_centeredModalWarning(){
            $('#QunList').html('<a id="qun_list"></a>');
        }
    </script>
{/block}